<template>
  <transition name="slide" appear>
    <musiclist :rank="rank" :title = "title" :bgImg = "bgImg" :songs = "songs"></musiclist>
  </transition>     
</template>
<script>
import Musiclist from 'components/music_list/musiclist.vue'
import {mapGetters} from "vuex"
import {getTopList} from "api/rank.js"
import {createsong,processSongsUrl} from "commom/js/song.js"
import {ERR_OK} from "api/config.js"
export default {
  data(){
    return{
      songs:[],
      rank:true
    }
  },
  created(){
    this._getTopList();
  },
  computed:{
    title(){
      return this.topList.topTitle
    },
    bgImg(){
      if (this.songs.length) {
          return this.songs[0].img
        }
        return ''
    },
    ...mapGetters([
      'topList'
    ]),
  },
  methods:{
    _getTopList(){
      if(!this.topList.id){
        this.$router.push("/rank");
        return;
      }
      getTopList(this.topList.id).then((res)=>{
        if(res.code == ERR_OK){
          processSongsUrl(this._normalizeSongs(res.songlist)).then((songs) => {
          this.songs = songs
          console.log(this.songs);
        })
        }
      })
    },
    _normalizeSongs(list){
      let ret = [];
      list.forEach((item,index)=>{
        let {data} = item
        if(data.pay.payplay === 0){
          ret.push(createsong(data))
        }
      })
      return ret;
    }
  },
  components:{
    Musiclist
  },
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter,.slide-leave-to
    transform :translate3d(100%,0,0);
  .slide-enter-active,.slide-leave-active
    transition: all .3s;
</style>
